<template>
	<view class="form">
		<view class="form-item" v-for="(it, index) in config" :key="index">
			<template v-if="it.type === 'tabNav1'">
				<nt-tab-panel :options="it.dataList" :value="modelData[it.name]"  @change="changePanel($event, it)" v-bind="$attrs"></nt-tab-panel>
				<view class="form-item__son" v-if="showSon(modelData[it.name], it.dataList)">
					<nt-tab-panel 
						:options="tabChild" 
						:value="sonValue" @change="changeSonPanel($event)" 
						v-bind="$attrs" v-if="tabChild.length > 0" 
						activeColor="#F5F8FC" activeTextColor="#333"
					></nt-tab-panel>
				</view>
			</template>
			<template v-if="it.type === 'date'">
				<view class="date" @tap="selectDate(it.name)">
					{{ formatParamTime(modelData[it.name], it.mode) || '选择时间' }}
					<text class="iconfont">&#xe6bb;</text>
				</view>
			</template>
		</view>
		<u-datetime-picker
			:show="show"
			v-model="modelData[dateKey]"
			:mode="timeConf[dateKey]"
			title="日期选择"
			@close="show = false" 
			@cancel="show = false" 
			@confirm="confirmDate"
			closeOnClickOverlay
		></u-datetime-picker>
	</view>
</template>

<script>
import dayjs from "dayjs"
export default {
	props: {
		// 搜索条件
		value: {
			type: Object,
			default: () => {}
		},
		// 表单配置
		config: {
			type: Array,
			default: () => []
		},
		loading: {
			type: Boolean,
			default: false
		},
		// 针对时间控件的
		timeConf: {
			type: Object, 
			default: () => {}
		}
	},
	data(){
		return {
			tabChild: [],
			modelData: {},
			show: false,
			dateKey: "",
			sonValue: "",
			pData: {},
			isFirst: true
		}
	},
	watch: {
		value:{
			handler(nv, ov){
				if(!nv) return
				this.modelData = nv
			},
			immediate: true,
			deep: true,
		},
		sonValue(nv){
			if(!nv) {
				this.$emit("sonData", {})
				return
			}
			this.$emit("sonData", {
				[this.pData.name]: nv
			})
		},
		config(nv){
			if(!nv) return
			this.initSetting(nv)
		}
	},
	methods: {
		changePanel(e, it){
			this.sonValue = ""
			this.pData = Array.isArray(e.item.son) ? {} : e.item.son
			this.modelData[it.name] = e.value
			this.$emit("input", this.modelData)
		},
		changeSonPanel(e){
			this.sonValue = e.value
			// 二级数据通过事件抛出
		},
		confirmDate(e){
			this.modelData[this.dateKey] = e.value
			this.show = false
			this.$emit("input",this.modelData)
		},
		// 选择日期
		selectDate(key){
			this.dateKey = key
			this.show = true
		},
		showSon(value, list){
			let find = list.find(item => item.value == value && !Array.isArray(item.son))
			if(find){
				this.tabChild = find.son.dataList
			}
			return find
		},
		initSetting(nv){
			if(!this.isFirst) return
			this.pData = Array.isArray(nv[0].dataList[0].son) ? {} : nv[0].dataList[0].son
			this.isFirst = false
		}
	}
}
</script>

<style scoped lang="scss">
.form{
	&-item{
		margin-bottom: 20rpx;
		&__son{
			margin-top: 20rpx;
		}
	}
}
.date{
	height: 70rpx;
	line-height: 70rpx;
	width: 100%;
	font-size: 30rpx;
	color:#333;
	padding: 0 40rpx;
	border-radius: 10rpx;
	position:relative;
	background:#DFE8F5;
	display: block;
	box-sizing: border-box;
	.iconfont{
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}
}
</style>